<template>
    <div class="chart_part">
		<div class="body">
			<div ref="myChart" style="width: 750px; height: 400px"></div>
			<Lines></Lines>
		</div>
		<div class="footer">
			<Echarts></Echarts>
			<Echart></Echart>
		</div>
    </div>
</template>




<style lang="scss" >
	.chart_part {
		.body,
		.footer {
			display: flex;
			align-items: center;
		}
	}
</style>
<script>
import Echarts from './Echarts.vue'
import Echart from './Echart.vue'
import Lines from './Lines.vue'


export default {
	components: { Echarts, Echart, Lines},
    data() {
        return {

   		 }
	},
    created() {
        this.$store.commit('title', this.title)
		
    },
	mounted() {
		this.setChart()

	},
	methods: {
		setChart() {
			let myChart = this.$echarts.init(this.$refs.myChart);
			var option = {
			title: {
				text: "总订单量",
			},
			tooltip: {},
			legend: {
				data: ["销量"],
			},
			xAxis: {
				data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
			},
			yAxis: {},
			series: [
				{
				barMaxWidth:20,
				name: "订单量",
				type: "bar",
				data: [40000, 70000, 20000, 30000, 88888, 100000, 40000, 70000, 20000, 30000, 88888, 20000],
				},
			],
		}

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      },
 		  
	}
	
    
}
</script>